<!DOCTYPE html>
<html>
  <head>
    <title>List</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div class="container">
      <h1>Article List</h1>
      <div class="post">
        <a href="/post">post article</a>
      </div>
      <div class="labels">
        <% labels.map(function(label){ %>
          <div class="label">
            <%=label.text %>(<%=label.articleIds.length %>)
          </div>

        <% }); %>  
      <div>
      <div class="articles">
        <% articles.map(function(article){ %>
          <div class="article">
            <div class="article-title">
              <a href="/articles/<%=article.id %>"><%=article.title %></a>
            </div>
            <div class="article-active">
              <a href="javascript:void(0)" id="<%=article.id %>">delete</a>
            </div>
          </div>
        <% }); %>
      </div>
    </div>

    <script src="/javascripts/jquery-3.1.1.min.js"></script>
    <script>
      $(function(){
        $(".article-active a").click(function(){
          var id=this.id;
          $.ajax({
            type:"DELETE",
            url:"/articles/"+id,
            cache:false,
            success:function(data){
              if(data.code===1){
                location.reload();
              }else{
                alert(data.msg);
              }
            }
          });
        });
      });
    </script>
  </body>
</html>
